// @see https://tailwindcss.com
import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
import {
  defineConfig,
  presetAttributify,
  presetWind4,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  // 预设
  presets: [
    // 属性化模式 & 无值的属性模式
    presetAttributify(),
    presetWind4({
      preflights: {
        theme: {
          process: createRemToPxProcessor(4),
        },
      },
    }), // 预设的样式
  ],
  postprocess: [createRemToPxProcessor(4)],
  transformers: [transformerVariantGroup(), transformerDirectives()],
  theme: {
    colors: {
      primary: 'var(--el-color-primary)',
    },
  },
  // 自定义规则
  rules: [],
  // 自定义快捷方式
  shortcuts: {
    // 布局
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
    'flex-center': 'flex justify-center items-center',
    'flex-x-start': 'flex-y-center justify-start',
    'flex-x-between': 'flex-y-center justify-between',
    'flex-x-end': 'flex-y-center justify-end',
    'flex-between': 'flex justify-between',
    'flex-col': 'flex flex-col',
    'flex-col-center': 'flex-col justify-center items-center',
    'flex-col-between': 'flex-col justify-between',

    // 绝对定位
    'absolute-tl': 'absolute top-0 left-0',
    'absolute-tr': 'absolute top-0 right-0',
    'absolute-bl': 'absolute bottom-0 left-0',
    'absolute-br': 'absolute bottom-0 right-0',
    'absolute-center': 'absolute-tl flex-center size-full',
    'fixed-tl': 'fixed top-0 left-0',
    'fixed-tr': 'fixed top-0 right-0',
    'fixed-bl': 'fixed bottom-0 left-0',
    'fixed-br': 'fixed bottom-0 right-0',
    'fixed-center': 'fixed-tl flex-center size-full',

    // 边框 border-line: 简写bd
    'border-color': 'border-gray-800',
    'border-line': 'border-solid border-1',
    'bd-gray': 'border-line border-color',
    'bd-primary': 'border-line border-primary',
    'bd-transparent': 'border-line border-transparent',
    'bd-bottom': 'bd-transparent border-b-gray-800',
    'bd-left': 'bd-transparent border-l-gray-800',
    'bd-right': 'bd-transparent border-r-gray-800',
    'bd-top': 'bd-transparent border-t-gray-800',
  },
})
